<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :inline="true" :model="queryParams" ref="queryParams">
          <el-form-item label="学科名称">
            <el-input v-model="queryParams.subjectName" placeholder="" @keyup.enter="subFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="subCleaer">清除</el-button>
            <el-button type="primary" size="small" @click="subFilter">搜索</el-button>
          </el-form-item>
          <el-button class="filter-item fr" size="small" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="isShowDept=true">新增学科</el-button>
        </el-form>
        <el-alert v-if="alertText !== ''" :title='alertText' type="info" class="alert" :closable="false" show-icon></el-alert>
        <!-- 数据 -->
        <el-table :data="dataList">
          <el-table-column label="序号" type='index' width='50px'>
          </el-table-column>
          <el-table-column label="学科名称" prop='subjectName'>
          </el-table-column>
          <el-table-column label="创建者" prop='username'>
          </el-table-column>
          <el-table-column label="创建日期" prop='addDate' width='200px'>
            <template v-slot="{row}">
              {{row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示" prop='isFrontDisplay'>
            <template v-slot="{row}">
              {{row.isFrontDisplay===1?'是':'否'}}
            </template>
          </el-table-column>
          <el-table-column label="二级目录" prop='twoLevelDirectory'>
          </el-table-column>
          <el-table-column label="标签" prop='tags'>
          </el-table-column>
          <el-table-column label="题目数量" prop='totals'>
          </el-table-column>
          <!-- 按钮 -->
          <el-table-column label="操作" width='230px'>
            <template v-slot="{row}">
              <el-button type="text" @click="$router.push('/subjects/directorys')">学科分类</el-button>
              <el-button type="text" @click="$router.push('/subjects/tags')">学科标签</el-button>
              <el-button type="text" @click="subDetail(row)">修改</el-button>
              <el-button type="text" @click="subDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="height: 60px; margin-top: 10px">
          <el-pagination background :page-sizes="[5, 10, 20, 30]" @size-change="handleSizeChange" :total="total" layout="->,prev,pager,next,sizes,jumper" @current-change="changePage" />
        </div>
      </el-card>
      <el-dialog title="新增学科" :visible.sync="isShowDept" width='400px' :before-close="handleClose">
        <el-form label-width="100px" :model="addForm" :rules='rules' ref="formRef">
          <el-form-item label="学科名称" prop='subjectName'>
            <el-input style="width:100%" placeholder="请输入学科名称" size='small' v-model="addForm.subjectName" />
          </el-form-item>
          <el-form-item label='是否显示'>
            <span>
              <el-switch v-model="addForm.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="subAdd">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="修改学科" :visible.sync="isShowupdate" width='400px' :before-close="handleClose">
        <el-form label-width="100px" :model="updateForm" :rules='rules' ref="formRef">
          <el-form-item label="学科名称" prop='subjectName'>
            <el-input style="width:100%" placeholder="" size='small' v-model="updateForm.subjectName" />
          </el-form-item>
          <el-form-item label='是否显示'>
            <span>
              <el-switch v-model="updateForm.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="subupdate">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { list, remove, add, update, detail } from '@/api/hmmm/subjects.js'
export default {
  name: 'subjectsAdd',
  data () {
    return {
      // 控制新增学科弹窗标志位
      isShowDept: false,
      // 控制修改学科弹窗标志位
      isShowupdate: false,
      dataList: [],
      alertText: '',
      total: 0,
      addForm: {
        subjectName: '',
        isFrontDisplay: true
      },
      updateForm: {
        subjectName: '',
        isFrontDisplay: true,
        id: null
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      queryParams: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      }
    }
  },
  created () {
    this.getList()
    // 键盘enter操作
    var lett = this
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        lett.subFilter(this.queryParams)
      }
    }
  },
  methods: {
    async getList () {
      const ret = await list(this.queryParams)
      this.dataList = ret.data.items
      this.alertText = `数据一共${ret.data.counts}条`
      this.total = ret.data.counts
    },
    changePage (page) {
      this.queryParams.page = page
      this.getList()
    },
    handleSizeChange (pagesize) {
      if (this.queryParams.page === 1) {
        this.getList(this.queryParams)
      }
      this.queryParams.pagesize = pagesize
    },
    subFilter () {
      this.queryParams.page = 1
      this.getList(this.queryParams)
    },
    subCleaer () {
      this.queryParams.subjectName = ''
    },
    // 删除
    async subDelete (obj) {
      const ret = await this.$confirm('确认要删除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 点击取消操作
      if (ret === 'cancel') {
        return this.$message.success('取消成功')
      }
      // 点击确定操作
      try {
        const ret = await remove(obj)
        if (ret.status === 200) {
          this.getList()
          this.$message.success('删除成功')
          const num = Math.ceil((this.total - 1) / this.queryParams.pagesize)
          this.queryParams.page = this.queryParams.page > num ? num : this.queryParams.page
        }
      } catch {
        this.$message.error('删除失败')
      }
    },
    // 新增
    subAdd () {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return
        const ret = await add(this.addForm)
        if (ret.status === 200) {
          this.getList()
          this.$message.success('新增成功')
          this.$refs.formRef.resetFields()
          this.isShowDept = false
          this.addForm.isFrontDisplay = true
        } else {
          this.$message.error('新增失败')
        }
      })
    },
    // 点击取消
    handleClose () {
      this.isShowDept = false
      this.isShowupdate = false
      this.addForm.isFrontDisplay = true
      this.$refs.formRef.resetFields()
    },
    // 获取学科详情
    async subDetail (obj) {
      this.isShowupdate = true
      this.updateForm.id = obj.id
      const ret = await detail(obj)
      this.updateForm.subjectName = ret.data.subjectName
      if (ret.data.isFrontDisplay === 1) {
        this.updateForm.isFrontDisplay = true
      } else {
        this.updateForm.isFrontDisplay = false
      }
    },
    // 修改
    async subupdate () {
      const ret = await update(this.updateForm)
      if (ret.status === 200) {
        this.getList()
        this.$message.success('修改成功')
        this.isShowupdate = false
      } else {
        this.$message.error('修改失败')
      }
    }
  }
}
</script>
<style scoped lang='less'></style>
